<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 1px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: #ff9ced;
            text-align: center;
            line-height: 100px;
            color: white;
            display: block;  /*把它从行内元素变成块元素*/
        }
        a:hover{  /*鼠标悬浮变色*/
            background: cornflowerblue;
        }

        /*移动元素*/
        .a2, .a4{  /*a2、a4两个一起移*/
            position: relative;
            left: 200px;  /*距离左边200*/
            top: -100px;  /*距离上边-100*/
        }
        .a5{
            position: relative;
            left: 100px;
            top: -300px;
        }

    </style>

</head>
<body>

<div id="box">
    <a href="#" class="a1">链接1</a>
    <a href="#" class="a2">链接2</a>
    <a href="#" class="a3">链接3</a>
    <a href="#" class="a4">链接4</a>
    <a href="#" class="a5">链接5</a>
</div>

</body>
</html>